<template>
	<view class="accountInformationContent">
		<view class="upper">
			<commonNavBar title="查看证后检查" :showRobot="true"></commonNavBar>
			<view class="step">
				<view v-for="(tabs, index) in stepList" :key="index" @tap="stepActive(index)">
					<view :class="{ 'active': tabs.active }">
						{{ tabs.step }}
					</view>
				</view>
			</view>
		</view>
		<view class="centre">
			<view class="content-container">
				<view class="addInspect" v-show="stepList[0].active">
					<view class="dt">审查信息</view>
					<!-- 		<view class="dd">
						<view class="left">审查类别</view>
						<view class="right">{{ postCertificationReviewData.reviewInfo.reviewCategory }}</view>
					</view> -->
					<view class="dd">
						<view class="left">审查组长</view>
						<view class="right">{{ postCertificationReviewData.reviewInfo.groupLeader }}</view>
					</view>
					<view class="dd" v-for="(person, index) in postCertificationReviewData.reviewInfo.personList">
						<view class="left">审查成员</view>
						<view class="right">{{ person.name }}</view>
					</view>
					<view class="dt">监管单位信息</view>
					<view class="dd">
						<view class="left">监管单位:</view>
						<view class="right">{{ postCertificationReviewData.aupervisionUnit.deptName }}</view>
					</view>
					<view class="dd">
						<view class="left">审查时间</view>
						<view class="right">{{ postCertificationReviewData.aupervisionUnit.reviewTime }}</view>
					</view>
					<view class="dt">生产经营主体信息</view>
					<view class="dd">
						<view class="left">主体名称</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.companyName }}</view>
					</view>
					<view class="dd">
						<view class="left">经营地址:</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.address }}</view>
					</view>
					<view class="dd">
						<view class="left">法定代表人:</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.legalPerson }}</view>
					</view>
					<view class="dd">
						<view class="left">主体类别</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.businessCategory }}</view>
					</view>
					<view class="dd">
						<view class="left">品种明细</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.businessScope }}</view>
					</view>
					<view class="dd">
						<view class="left">许可证标号</view>
						<view class="right">{{ postCertificationReviewData.businessEntity.LICENSE }}</view>
					</view>
				</view>
				<view class="addInspectContent" v-show="stepList[1].active">
					<view class="dt">证后审查检查要点表</view>
					<view class="box">
						<view class="dd" style="padding-bottom: 50px;"
							v-for="(item, index) in postCertificationReviewData.standardList" :key="index">
							<view class="h1">
								{{ item.serialNum }}.{{ item.standardName }}
							</view>
							<view class="block">
								<view class="li" style="border-bottom: 1px solid #ececec;padding-bottom: 10px;"
									v-for="(data, dataIndex) in item.contentList" :key="dataIndex">
									<view class="titles" :class="{ 'red': data.importentItem === '1' }">
										<view class="number">
											{{ item.serialNum }}.{{ data.serialNum }}
										</view>
										<view class="text">
											<text
												v-text="data.importentItem === 1 ? '' : data.importentItem === 2 ? '*' : '**'"></text>{{
													data.checkContent }}
										</view>
										<!-- 是否显示检查指南(不知道pc在哪配置  暂时先全放开了) v-if="data.GUIDE_PRE === '1'" -->
										<view class="guide"
											v-if="checkExist(data.CHECK_BASIS, data.CHECK_GUIDE, data.CHECK_METHOD, data.CHECK_PROBLEM)"
											@tap="inspectionGuidelines(data.CHECK_BASIS, data.CHECK_GUIDE, data.CHECK_METHOD, data.CHECK_PROBLEM)">
											<image src="/static/img/questionMark.png" mode=""></image>
											检查指南
											<view class="triangle"></view>
										</view>
									</view>
									<view class="optionList">
										<view class="list">
											<view class="option" :class="{ 'active': data.selection == 0 }">
												符合
											</view>
											<view class="option" :class="{ 'active': data.selection == 1 }">
												不符合
											</view>
											<view class="option" :class="{ 'active': data.selection == 2 }">
												合理缺项
											</view>
										</view>
									</view>
									<view class="case">
										<view class="h2" style="font-size: 16rpx;">问题描述：</view>
										<view class="content">
											<text style="font-size: 16rpx;">{{ data.problemContent }}</text>
										</view>
									</view>
									<view class="case" style="margin-top: 10px;">
										<view class="h2" style="font-size: 16rpx;">食品类别及类别名称：{{ data.reviewCategory }}
										</view>
									</view>
									<!-- <text class="remark">备注:{{data.remark}}</text> -->
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="addInspectTrisk" v-show="stepList[2].active">
					<view class="dt">主体信息修改</view>
					<view class="dd">
						<view class="left">审查结论</view>
						<view class="right">
							<view class="optionList">
								<view class="list">
									<view class="option"
										:class="{ 'active': getReviewResult() == 0 }">
										符合
									</view>
									<view class="option"
										:class="{ 'active': getReviewResult() == 1 }">
										基本符合
									</view>
									<view class="option"
										:class="{ 'active': getReviewResult() == 2 }">
										不符合
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="dd">
						<view class="left">实际扣分数</view>
						<view class="right">{{ postCertificationReviewData.reviewConclusion.actualDeductionPoints }}
						</view>
					</view>
					<view class="dd">
						<view class="left">企业异议</view>
						<view class="right">
							<view class="optionList">
								<view class="list">
									<view class="option"
										:class="{ 'active': postCertificationReviewData.reviewConclusion.corporateObjection == 0 }">
										无异议
									</view>
									<view class="option"
										:class="{ 'active': postCertificationReviewData.reviewConclusion.corporateObjection == 1 }">
										有异议
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="dd">
						<view class="left">异议说明</view>
						<view class="right">{{ postCertificationReviewData.reviewInfo.objectionStatement }}</view>
					</view>
					<view class="dd">
						<view class="left">填写说明</view>
						<view class="right" style=" word-break: break-word; white-space: pre-wrap;display:block;">
							<p>1、本记录表中打*号为重点项，打**号为关键项，其他为一般项。</p>
							<p>2、本记录表中*2.1、2.3、*2.4、4.2、*4.5、”52、*5.3、”*6.1、*6.2、6.4、“6.5、*7.1、*7.2、*”7.3、为抽查项。(对人员抽査应不少于两人，对产品抽查应不少于两个批次)
							</p>
							<p>3、审查采取扣分制，发现1项一般项不符合扣2分，发现1项*重点项不符合扣10分，发现1项**关键项不符合扣20分，</p>
							<p>4、审查结论根据最终扣分进行综合判断，分为符合、基本符合、不符合三种情形:①符合:扣分&lt;20分;②基本符合:20分≤扣分&lt;35分; ③不符合:扣分≥35分</p>
							<p>5、检查项评价为不符合的，应具体描述不符合的情况。</p>
							<p>6、企业获得多个食品许可类别的，应当在“食品类别及类别名称”一栏中准确描述发现问题所属的食品类别及类别名称。</p>
							<p>7、如果检查项目存在合理缺项，应在“合理缺项”处勾选，默认该项不扣分，</p>
							<p>8、《食品生产者证后审查情况记录表》一式三份,市审查中心、区市场监管局和被审查食品生产者各留存一份。</p>
							<p>9、本记录表根据国家有关规定及我市具体实施情况，可以进行调整，</p>
						</view>
					</view>
					<view class="dd" v-for="(file, index) in postCertificationReviewData.certificaReviewFileList">
						<view class="left" v-if="file.fileSource == 1">导出整改报告</view>
						<view class="left" v-if="file.fileSource == 2">导出分析报告</view>
						<view class="left" v-if="file.fileSource == 3">导出情况报告</view>
						<view class="left" v-if="file.fileSource == 4">导出处罚决定书</view>
						<view class="right" style="color: blue;text-decoration: underline;"
							@tap="downloadFile(file.filePath, file.fileName)">{{ file.fileName }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import commonNavBar from '@/components/CommonNavBar.vue';

export default {
	components: {
		commonNavBar,

	},
	data() {
		return {
			postCertificationReviewData: {
				aupervisionUnit: {},
				businessEntity: {},
				reviewConclusion: {},
				reviewInfo: { reviewInfo: {} },
				standardList: {},
				templateName: {}
			},
			pickerValue: 0,
			companyId: null,
			stepList: [{
				step: '基础信息',
				active: true
			}, {
				step: '检查内容',
				active: false
			}, {
				step: '检查结果',
				active: false
			}],
		}
	},
	onLoad(options) {
		plus.nativeUI.closeWaiting();
		this.companyId = options.postCertificationReviewId;
		// this.initData(options.postCertificationReviewId);
	},
	onReady() {
		// 基础信息数据
		this.initData(this.companyId)
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		// 跳转只能客服
		robot() {
			uni.navigateTo({
				url: '/pages/robot/robot'
			})
		},
		async initData(id) {
			let data = {
				id: id
			}
			try {
				const res = await uni.$api.getDetail(data);
				this.postCertificationReviewData = res.data.data
			} catch (error) {
				console.error(error)
			}
		},
		checkSelected(selectedStr, id) {
			console.log("selectedStr", selectedStr)
			console.log("id", id)
			if (selectedStr) {
				var selectedArr = selectedStr.split(",");
				return selectedArr.includes(id);
			} else {
				return false;
			}
		},
		// 切换选项卡
		stepActive(index) {
			this.stepList.forEach((item, idx) => {
				item.active = idx === index;
			});
		},
		checkExist(v1, v2, v3, v4) {
			//判断是否存在检查指南
			if ((v1 == undefined || v1 == '') && (v2 == undefined || v2 == '') && (v3 == undefined || v3 == '') && (v4 == undefined || v4 == '')) {
				return false;
			} else {
				return true;
			}
		},
		downloadFile(fileUrl, fileName) {
			var waiting = plus.nativeUI.showWaiting("开始下载文件");
			var download = plus.downloader.createDownload(uni.$baseUrl + fileUrl, {
				filename: '_downloads/' + fileName
			}, function (d, status) {
				if (status == 200 && d.state == 4) {
					plus.nativeUI.closeWaiting();
					uni.showModal({
						title: '提示',
						content: '文件下载完成,要打开文件么?',
						success: (e) => {
							console.log(e)
							if (e.confirm) {
								let fileSaveUrl = plus.io.convertLocalFileSystemURL(d.filename);
								plus.runtime.openFile(fileSaveUrl); //选择软件打开文件
							}
						}
					})

					return;
				}
				plus.downloader.clear(); //清除下载任务
				uni.showToast({
					icon: 'error',
					title: '文件下载失败'
				})

			});
			download.addEventListener("statechanged", function (downloadRes) {
				if (downloadRes.totalSize != downloadRes.downloadedSize) {
					waiting.setTitle("正在下载" + ((downloadRes.downloadedSize / downloadRes.totalSize) * 100).toFixed(2) + "%", {
						padding: "10px"
					})
				}
				if (downloadRes.totalSize != 0 && downloadRes.totalSize == downloadRes.downloadedSize) {
					waiting.close()
				}
			})
			download.start();
		},
		// 根据实际扣分数计算审查结论
		getReviewResult() {
			const actualDeductionPoints = this.postCertificationReviewData.reviewConclusion.actualDeductionPoints;
			if (actualDeductionPoints === null || actualDeductionPoints === undefined || actualDeductionPoints === '') {
				return null;
			}
			
			const points = Number(actualDeductionPoints);
			if (points < 20) {
				return 0;  // 符合：扣分<20分
			} else if (points >= 20 && points < 35) {
				return 1;  // 基本符合：20分≤扣分<35分
			} else {
				return 2;  // 不符合：扣分≥35分
			}
		}
	}
}
</script>

<style lang="scss">
.accountInformationContent {
	background: #F9F9F9;
	// height: calc(100vh - 195rpx);

	.upper {
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		width: 100%;

		.title {
			background: url('../../static/img/inspectBg.png');
			background-size: cover;
			width: 100%;
			height: 115rpx;
			line-height: 115rpx;
			position: relative;
			display: flex;
			justify-content: center;

			.arrow {
				position: absolute;
				left: 33rpx;
				top: 50%;
				transform: translate(0%, -50%);
				width: 100rpx;
				height: 100rpx;

				&::before {
					display: block;
					content: "";
					position: absolute;
					top: 50%;
					left: 0%;
					width: 20rpx;
					height: 20rpx;
					border-left: 1px solid #fff;
					border-top: 1px solid #fff;
					transform: translate(0%, -50%) rotate(-45deg);
				}
			}

			text {
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				letter-spacing: 1px;
			}

			.intelligence {
				position: absolute;
				right: 30rpx;
				top: 50%;
				transform: translate(0%, -50%);
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #FFFFFF;
				display: flex;

				image {
					width: 75rpx;
					height: 64rpx;
				}
			}
		}

		.step {
			display: flex;
			justify-content: space-around;
			height: 80rpx;
			line-height: 80rpx;
			background: #F9F9F9;
			border-bottom: 2rpx solid #D6D6D6;

			view {
				position: relative;
				font-size: 25rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;

				&.active {
					color: #0552A9;

					&::before {
						display: block;
						content: "";
						position: absolute;
						left: 50%;
						bottom: 0%;
						transform: translate(-50%, 0%);
						width: 100rpx;
						height: 5rpx;
						background: #0552A9;
					}
				}
			}
		}
	}

	.centre {
		// margin: 115rpx 0 0 0;
		// padding: 0 17.5rpx;
		// height: calc(100vh - 280rpx);
		// overflow-x: hidden;
		margin: 195rpx 0 0 0;
		// padding: 0 17.5rpx;
		height: calc(100vh - 280rpx);
		overflow-x: hidden;

		.content-container {

			.title {
				height: 73rpx;
				line-height: 73rpx;
				background: #E1EAF4;
				display: flex;
				text-indent: 50rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #002B5B;
			}

			.addInspect {

				.dt {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					background: #F9F9F9;
					font-weight: bold;
					border-bottom: 2rpx solid #D6D6D6;
					padding: 30rpx 0;
				}

				.dd {
					display: flex;
					justify-content: flex-start;
					font-size: 24rpx;
					border: 2rpx solid #D6D6D6;
					border-top: none;
					background: #fff;

					.left {
						width: 150rpx;
						background: #F9F9F9;
						border-right: 2rpx solid #D6D6D6;
						padding: 20rpx 10rpx 20rpx 20rpx;
					}

					.right {
						width: 600rpx;
						padding: 0 0 0 20rpx;
						display: flex;
						align-items: center;


						view {
							background: none;
							border: none;
							font-size: 24rpx;
							position: relative;
							color: #0902FF;

							.triangle {
								width: 0;
								height: 0;
								border-top: 8rpx solid transparent;
								border-bottom: 8rpx solid transparent;
								border-left: 10rpx solid #0902FF;
								position: absolute;
								top: 50%;
								right: -20rpx;
								transform: translate(0%, -50%);
							}
						}

						&.button {
							justify-content: space-around;
						}
					}
				}
			}

			.addInspectContent {
				padding: 0 17.5rpx;

				.dt {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					background: #F9F9F9;
					font-weight: bold;
					border-bottom: 2rpx solid #D6D6D6;
					padding: 30rpx 0;
				}

				.box {

					.dt {
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(0, 0, 0, 0.05);
						border-radius: 15rpx;
						padding: 23rpx 28rpx;

						.h1 {
							font-size: 24rpx;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 500;
							color: #0552A9;
							padding: 0 0 22rpx 0;
							border-bottom: 2rpx solid #CECECE;
						}

						.div {
							display: flex;
							margin: 21rpx auto 0;

							.left {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #3A3A3A;
							}

							.right {
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #686868;

								text {
									color: #DC0000;
								}

								input {
									font-size: 20rpx;
									font-family: PingFangSC-Regular, PingFang SC;
									font-weight: 400;
									color: #999999;
									width: 400rpx;
									text-indent: 10rpx;
								}

								.placeholder-class {
									color: #999999;
								}
							}

							&:last-child {
								align-items: center;
							}

							.custom-radio-group {
								display: flex;
								font-size: 20rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;

								.labelRadio {
									display: flex;
									margin: 0 10rpx;
									align-items: center;
								}

								/deep/.uni-radio-input {
									width: 20rpx;
									height: 20rpx;
									border: 1rpx solid #979797;
								}

								.yes {

									/deep/.uni-radio-input {
										background: #07D276 !important;
										border-color: #07D276 !important;

										&::before {
											background: #07D276;
											border-radius: 50%;
											font-size: 16rpx;
										}
									}
								}

								.no {

									/deep/.uni-radio-input {
										background: #FF1F1F !important;
										border-color: #FF1F1F !important;
										position: relative;
										transform: rotate(45deg);

										&::before {
											content: "";
											position: absolute;
											top: 50%;
											left: 50%;
											background-color: #fff;
											width: 2rpx;
											height: 60%;
											transform: translate(-50%, -50%);
										}

										&::after {
											content: "";
											position: absolute;
											top: 50%;
											left: 50%;
											background-color: #fff;
											width: 60%;
											height: 2rpx;
											transform: translate(-50%, -50%);
										}
									}
								}
							}
						}
					}

					.dd {

						.h1 {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #333333;
							margin: 10rpx auto;
							text-indent: 26rpx;
						}

						.block {
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(0, 0, 0, 0.05);
							border-radius: 15rpx;
							padding: 23rpx 26rpx;

							.li {

								.titles {
									font-size: 20rpx;
									font-family: PingFangSC-Medium, PingFang SC;
									font-weight: 500;
									color: #353535;
									position: relative;
									display: flex;

									.number {
										margin: 0 10rpx 0 0;
									}

									text {
										margin: 0 6rpx 0 0;
									}

									&.red {

										text {
											color: #EF0000;
										}
									}

									.text {
										width: 76%;
									}

									.guide {
										position: absolute;
										top: 0;
										right: 0rpx;
										color: #026DC6;
										display: flex;
										align-items: center;

										image {
											width: 22rpx;
											height: 22rpx;
											margin: 0 6rpx 0 0;
										}

										.triangle {
											width: 0;
											height: 0;
											border-top: 8rpx solid transparent;
											border-bottom: 8rpx solid transparent;
											border-left: 10rpx solid #026DC6;
											position: absolute;
											top: 50%;
											right: -20rpx;
											transform: translate(-50%, -50%);
										}
									}
								}

								.optionList {
									display: flex;
									flex-direction: column;
									margin: 10px auto 0;
									align-items: flex-end;

									.list {
										display: flex;

										.option {
											padding: 12rpx 30rpx;
											border: 2rpx solid #C3C3C3;
											border-radius: 5rpx 0 0 5rpx;
											font-size: 18rpx;
											font-family: PingFangSC-Regular, PingFang SC;
											font-weight: 400;
											color: #666666;

											&:nth-child(2) {
												border-left: none;
												// border-right: none;
												border-radius: 0;
											}

											&:last-child {
												border-radius: 0 5rpx 5rpx 0;
												border-left: 0;
											}

											&.active {
												background: #E9F2FF;
												color: #0552A9;
											}
										}
									}

									.case {
										width: 650rpx;

										.h2 {
											font-size: 16rpx;
											font-family: PingFangSC-Medium, PingFang SC;
											font-weight: 500;
											color: #353535;
											margin: 20rpx 0 6rpx 0;
										}

										input {
											margin: 20rpx auto;
											border: 2rpx solid #e5e5e5;
											// border: 2rpx solid red;
											border-radius: 6rpx;
											text-indent: 10rpx;
											font-size: 18rpx;
											padding: 16rpx 0;

											&.inspect {
												border: 2rpx solid #dedede;
											}
										}

										.placeholder-class {
											color: red;
										}

										.placeholder-class-inspect {
											color: #dedede;
										}
									}
								}

								&+.li {
									margin: 20rpx auto 0;

									.title {

										// text {
										// 	color: #353535;
										// }
									}
								}
							}
						}
					}
				}
			}

			.addInspectTrisk {
				padding: 0 17.5rpx;

				.dt {
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					background: #F9F9F9;
					font-weight: bold;
					border-bottom: 2rpx solid #D6D6D6;
					padding: 30rpx 0;
				}

				.dd {
					display: flex;
					justify-content: flex-start;
					font-size: 24rpx;
					border: 2rpx solid #D6D6D6;
					border-top: none;
					background: #fff;

					.left {
						width: 150rpx;
						background: #F9F9F9;
						border-right: 2rpx solid #D6D6D6;
						padding: 20rpx 10rpx 20rpx 20rpx;
					}

					.right {
						width: 600rpx;
						padding: 0 0 0 20rpx;
						display: flex;
						align-items: center;


						view {
							background: none;
							border: none;
							font-size: 24rpx;
							position: relative;
							color: #0902FF;

							.triangle {
								width: 0;
								height: 0;
								border-top: 8rpx solid transparent;
								border-bottom: 8rpx solid transparent;
								border-left: 10rpx solid #0902FF;
								position: absolute;
								top: 50%;
								right: -20rpx;
								transform: translate(0%, -50%);
							}
						}

						&.button {
							justify-content: space-around;
						}
					}

					.optionList {
						display: flex;
						flex-direction: column;
						align-items: flex-end;

						.list {
							display: flex;

							.option {
								padding: 12rpx 30rpx;
								border: 2rpx solid #C3C3C3;
								border-radius: 5rpx 0 0 5rpx;
								font-size: 18rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;

								&:nth-child(2) {
									border-left: none;
									// border-right: none;
									border-radius: 0;
								}

								&:last-child {
									border-radius: 0 5rpx 5rpx 0;
									border-left: 0;
								}

								&.active {
									background: #E9F2FF;
									color: #0552A9;
								}
							}
						}

						.case {
							width: 650rpx;

							.h2 {
								font-size: 16rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #353535;
								margin: 20rpx 0 6rpx 0;
							}

							input {
								margin: 20rpx auto;
								border: 2rpx solid #e5e5e5;
								// border: 2rpx solid red;
								border-radius: 6rpx;
								text-indent: 10rpx;
								font-size: 18rpx;
								padding: 16rpx 0;

								&.inspect {
									border: 2rpx solid #dedede;
								}
							}

							.placeholder-class {
								color: red;
							}

							.placeholder-class-inspect {
								color: #dedede;
							}
						}
					}

					&+.li {
						margin: 20rpx auto 0;

						.title {

							// text {
							// 	color: #353535;
							// }
						}
					}
				}
			}
		}
	}

	.fixed {
		position: fixed;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		.button {
			margin: 40rpx auto 0;
			width: 269rpx;
			height: 55rpx;
			line-height: 55rpx;
			background: #0552A9;
			border-radius: 10rpx;
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			text-align: center;
			color: #fff;
		}
	}

	.modifyPopupContent {
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0 0;

		.title {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background: url('../../static/img/popupTitle.png') no-repeat center center;
			background-size: cover;
			font-size: 25rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			// text-indent: 45rpx;
			text-align: center;
		}

		.box {
			text-align: center;
			margin: 50rpx auto;

			.dd {
				display: flex;
				justify-content: flex-start;
				font-size: 24rpx;
				border: 2rpx solid #D6D6D6;
				background: #fff;

				.left {
					width: 150rpx;
					background: #F9F9F9;
					border-right: 2rpx solid #D6D6D6;
					padding: 20rpx 10rpx 20rpx 20rpx;
				}

				.right {
					width: 600rpx;
					padding: 0 0 0 20rpx;
					display: flex;
					align-items: center;


					view {
						background: none;
						border: none;
						font-size: 24rpx;
						position: relative;
						color: #0902FF;
					}
				}

				&+.dd {
					border-top: none;
				}
			}
		}

		.button {
			margin: 58rpx auto 0;
			padding: 0 95rpx 24rpx 95rpx;
			display: flex;

			button {
				width: 269rpx;
				height: 55rpx;
				line-height: 55rpx;
				background: #0552A9;
				border-radius: 10rpx;
				font-size: 20rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;

				&.determine {
					color: #fff;
				}

				&.cancellation {
					background: none;
					border: 1rpx solid #979797;
					color: #979797;
				}
			}
		}
	}
}

.remark {
	font-size: 20rpx;
	font-weight: 500;
	color: #6b6b6b;
	letter-spacing: 1px;
}
</style>